<template>
<div class="data-box">
  <div class="search-box box-shadow">
    <a-row>
      <a-col :span="2">统计范围：</a-col>
      <a-col :span="3">
        <a-select placeholder="全部">
          <a-select-option :value="null" key="0">全部</a-select-option>
          <a-select-option v-for="section in sections" :key="section.sectionId" :value="section.sectionId">
            {{ section.sectionName }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <a-range-picker v-model:value="searchForm.timeRange" :format="'YYYY-MM-DD'" />
      </a-col>
      <a-col :span="2">
        <a-button @click="searchAll" type="primary">查询</a-button>
      </a-col>
    </a-row>
  </div>

  <div class="top-box">
    <div class="left-box">
      <div class="water-totle totle box-shadow">
        <a-row align="middle">
          <a-col :span="4">
            <a-image :src="water1"/>
          </a-col>
          <a-col :span="8">洒水总里程</a-col>
          <a-col :span="12">{{ charOptions.legendTotal }}km</a-col>
        </a-row>
      </div>
      <div class="mile-totle totle box-shadow">
        <a-row align="middle">
          <a-col :span="4">
            <a-image :src="water2"/>
          </a-col>
          <a-col :span="8">洒水总量</a-col>
          <a-col :span="12">{{ charOptions.flowTotal }}m³</a-col>
        </a-row>
      </div>
    </div>
    <div class="right-box box-shadow">
      <a-row>
        <a-col>车辆统计</a-col>
      </a-row>
      <a-row>
        <a-tabs type="card" v-model:activeKey="tab1">
          <a-tab-pane key="1" tab="按日统计">
            <div>
              <div>
                <vue-echarts :option="charOptions.deviceDaily" ref="chart"/>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="按月统计">
            <div>
              <div>
                <vue-echarts :option="charOptions.deviceMonthly" ref="chart"/>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-row>
    </div>
  </div>

  <div class="bottom-box box-shadow">
    <a-row>
      <a-col>数据汇总</a-col>
    </a-row>
    <a-row>
      <a-tabs type="card" v-model:activeKey="tab2">
        <a-tab-pane key="1" tab="按日统计">
          <div>
            <div>
              <vue-echarts :option="charOptions.legendDaily" ref="chart"/>
            </div>
            <div>
              <vue-echarts :option="charOptions.flowDaily" ref="chart"/>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="按月统计">
          <div>
            <div>
              <vue-echarts :option="charOptions.legendMonthly" ref="chart"/>
            </div>
            <div>
              <vue-echarts :option="charOptions.flowMonthly" ref="chart"/>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-row>
  </div>
</div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, reactive} from "vue";
import {useStore} from "vuex";
import { VueEcharts } from 'vue3-echarts';
import water1 from "@/assets/image/water_1.png";
import water2 from "@/assets/image/water_2.png";
import axios from '@/utils/axios';
import moment from 'moment';

class SearchForm {
  sectionId:any = null
  timeRange:any = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
}

export default defineComponent({
  setup(){
    const store = useStore();
    const userName = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserInfo"])).username);
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])));
    const searchForm = ref(new SearchForm());
    const tab1 = ref('1');
    const tab2 = ref('1');

    const charOptions = reactive({
      deviceDaily:<any>null,
      deviceMonthly:<any>null,

      legendDaily:<any>null,
      legendMonthly:<any>null,

      flowDaily:<any>null,
      flowMonthly:<any>null,

      legendTotal: "--",
      flowTotal: "--"
    })
    /**
     * 按日查询设备在线情况
     */
    const getDeviceTotleByDaily=()=>{
      axios.post("/analyze/common/findStatisticsOfDevice",{
        "sections":[{
            "sectionId": searchForm.value.sectionId || 0,
            "kind": [18]
          }],
        "startTime": searchForm.value.timeRange[0],
        "endTime": searchForm.value.timeRange[1]
      }).then((res:any)=>{
        let options = <any>{
          grid:{
            top:30,
            left:60,
            right:60,
            bottom:20
          },
          legend: {
            left: 'right'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value',
            name: '(单位:辆)'
          },
          series: []
        };

        if(res.success && res.data.length>0){
          let dates = new Array(); // 日期
          res.data[0].info.forEach((item:any)=>{
            dates.push(item.dateTime);
          })

          let total1 = new Array(dates.length).fill(0);// 在场数量
          let total2 = new Array(dates.length).fill(0);// 在线数量
          res.data.forEach((item1:any)=>{
            for(let i= 0; i < dates.length; i++){
              total1[i] = total1[i] + item1.info[i].presenceNums;
              total2[i] = total2[i] + item1.info[i].onlineNums;
            }
          })
          options.xAxis.data = dates;
          options.series.push({
            name: '在场数量',
            color:'#2D99FF',
            type: 'bar',
            barMaxWidth: 20,
            data: total1
          });
          options.series.push({
            name: '施工数量',
            color:'#0455A4',
            type: 'bar',
            barMaxWidth: 20,
            data: total2,
          });
        }
        charOptions.deviceDaily = options;
      })
    }

    /**
     * 按月查询设备在线情况
     */
    const getDeviceTotleByMonthly=()=>{
      axios.post("/analyze/common/findStatisticsOfDeviceMonthly",{
        "sections":[{
          "sectionId": searchForm.value.sectionId || 0,
          "kind": [18]
        }],
        "startTime": searchForm.value.timeRange[0],
        "endTime": searchForm.value.timeRange[1]
      }).then((res:any)=>{
        let options = <any>{
          grid:{
            top:30,
            left:60,
            right:60,
            bottom:20
          },
          legend: {
            left: 'right'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value',
            name: '(单位:辆)'
          },
          series: []
        };

        if(res.success && res.data.length>0){
          let dates = new Array(); // 日期
          res.data[0].info.forEach((item:any)=>{
            dates.push(item.dateTime);
          })

          let total1 = new Array(dates.length).fill(0);// 在场数量
          let total2 = new Array(dates.length).fill(0);// 在线数量
          res.data.forEach((item1:any)=>{
            for(let i= 0; i < dates.length; i++){
              total1[i] = total1[i] + item1.info[i].presenceNums;
              total2[i] = total2[i] + item1.info[i].onlineNums;
            }
          })
          options.xAxis.data = dates;
          options.series.push({
            name: '在场数量',
            color:'#2D99FF',
            type: 'bar',
            barMaxWidth: 20,
            data: total1
          });
          options.series.push({
            name: '施工数量',
            color:'#0455A4',
            type: 'bar',
            barMaxWidth: 20,
            data: total2,
          });
        }
        charOptions.deviceMonthly = options;
      })
    }

    /**
     * 按日查询施工数据
     */
    const getBuildDaily=()=>{
      axios.post("/water/findBuildDaily",{
        "sectionId":searchForm.value.sectionId>0?searchForm.value.sectionId:null,
        "startTime":searchForm.value.timeRange[0],
        "endTime":searchForm.value.timeRange[1]
      }).then((res:any)=>{
        let legendOptions = <any>{
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left:'right',
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            name: '(单位:km)',
            axisLabel:{
              formatter:(value:any)=>{
                return value.toFixed(2)
              }
            }
          },
          series: []
        };
        let flowOptions = <any>{
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left:'right',
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            name: '(单位:㎡)',
            axisLabel:{
              formatter:(value:any)=>{
                return value.toFixed(2)
              }
            }
          },
          series: []
        };
        if(res.success && res.data.length>0){
          let dates = new Array(); // 日期
          res.data[0].buildInfo.forEach((item:any)=>{
            dates.push(item.dateTime);
          })
          let sections = new Array();
          let total1s = new Array();
          let total2s = new Array();
          res.data.forEach((item:any)=>{
            let total1 = new Array(dates.length).fill(0);// 洒水里程
            let total2 = new Array(dates.length).fill(0);// 洒水量
            for(let i= 0; i < dates.length; i++){
              total1[i] = item.buildInfo[i].waterMileDelt;
              total2[i] = item.buildInfo[i].waterDelt;
            }
            sections.push(item.sectionName);
            total1s.push(total1);
            total2s.push(total2);
          })

          legendOptions.xAxis.data = dates;
          legendOptions.legend.data= sections;
          for(let i = 0; i < sections.length; i++){
            legendOptions.series.push({
              name: sections[i],
              type: 'line',
              data: total1s[i]
            });
          }

          flowOptions.xAxis.data = dates;
          flowOptions.legend.data = sections;
          for(let i = 0; i < sections.length; i++){
            flowOptions.series.push({
              name: sections[i],
              type: 'line',
              data: total2s[i]
            });
          }
        }
        charOptions.legendDaily = legendOptions;
        charOptions.flowDaily = flowOptions;
      })
    }

    /**
     * 按月查询施工数据
     */
    const getBuildMonthly=()=>{
      axios.post("/water/findBuildMonthly",{
        "sectionId":searchForm.value.sectionId>0?searchForm.value.sectionId:null,
        "startTime":searchForm.value.timeRange[0],
        "endTime":searchForm.value.timeRange[1]
      }).then((res:any)=>{
        let legendOptions = <any>{
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left:'right',
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            name: '(单位:km)',
            axisLabel:{
              formatter:(value:any)=>{
                return value.toFixed(2)
              }
            }
          },
          series: []
        };
        let flowOptions = <any>{
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left:'right',
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            name: '(单位:㎡)',
            axisLabel:{
              formatter:(value:any)=>{
                return value.toFixed(2)
              }
            }
          },
          series: []
        };
        if(res.success && res.data.length>0){
          let dates = new Array(); // 日期
          res.data[0].buildInfo.forEach((item:any)=>{
            dates.push(item.dateTime);
          })
          let sections = new Array();
          let total1s = new Array();
          let total2s = new Array();
          res.data.forEach((item:any)=>{
            let total1 = new Array(dates.length).fill(0);// 洒水里程
            let total2 = new Array(dates.length).fill(0);// 洒水量
            for(let i= 0; i < dates.length; i++){
              total1[i] = item.buildInfo[i].waterMileDelt;
              total2[i] = item.buildInfo[i].waterDelt;
            }
            sections.push(item.sectionName);
            total1s.push(total1);
            total2s.push(total2);
          })

          legendOptions.xAxis.data = dates;
          legendOptions.legend.data= sections;
          for(let i = 0; i < sections.length; i++){
            legendOptions.series.push({
              name: sections[i],
              type: 'line',
              data: total1s[i]
            });
          }

          flowOptions.xAxis.data = dates;
          flowOptions.legend.data = sections;
          for(let i = 0; i < sections.length; i++){
            flowOptions.series.push({
              name: sections[i],
              type: 'line',
              data: total2s[i]
            });
          }
        }
        charOptions.legendMonthly = legendOptions;
        charOptions.flowMonthly = flowOptions;
      })
    }

    /**
     * 洒水里程,洒水总量统计
     */
    const buildTotle=()=>{
      axios.post("/water/findBuildTotle",{
        "sectionId":searchForm.value.sectionId>0?searchForm.value.sectionId:null
      }).then((res:any)=>{
        let legend = 0;
        let flow = 0;
        if(res.success && res.data.length>0){
          res.data.forEach((item:any)=>{
            legend += item.waterMile;
            flow += item.water;
          })
        }
        charOptions.legendTotal = legend.toFixed(1);
        charOptions.flowTotal = flow.toFixed(1);
      })
    }

    const searchAll=()=>{
      getDeviceTotleByDaily();
      getDeviceTotleByMonthly();
      getBuildDaily();
      getBuildMonthly();
    }

    onMounted(()=>{
      searchAll();
      buildTotle();
    })

    return {
      water1,
      water2,
      tab1,
      tab2,
      sections,
      searchForm,
      searchAll,
      charOptions
    }
  },
  components:{VueEcharts}
})
</script>

<style lang="scss" scoped>
.data-box{
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  .search-box{
    width: 100%;
    height: 72px;
    padding: 20px 0;
    box-sizing: border-box;
    .ant-row{
      .ant-col:nth-child(1){
        color: #666666;
        font-weight: 500;
        font-size:14px;
        line-height:32px;
        text-align:right;
      }
      .ant-col:nth-child(2){
        padding-right: 20px;
        .ant-select{
          width: 100%;
        }
      }
    }
  }
  .top-box{
    display: flex;
    width: 100%;
    height: 290px;
    margin-top: 20px;
    .left-box{
      width: 385px;
      height: 100%;
      >div:nth-child(n + 2){
        margin-top: 20px;
      }
      .totle{
        display: flex;
        width: 100%;
        height: 135px;
        padding: 0 30px;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        .ant-row{
          .ant-col:nth-child(2){
            color: #333;
            font-size: 18px;
            font-weight: bold;
          }
          .ant-col:nth-child(3){
            color: #1677FF;
            font-size: 32px;
            text-align: right;
            font-weight: bold;
          }
        }
      }
    }
    .right-box{
      width: 1210px;
      height: 100%;
      margin-left: 20px;
      padding: 15px 24px;
      box-sizing: border-box;
      .ant-row:nth-child(1){
        .ant-col:nth-child(1){
          color: #333333;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
      .ant-row:nth-child(2){
        width: 100%;
        height: calc(100% - 38px);
        .ant-tabs-card{
          width: 100%;
          height: 100%;
          ::v-deep .ant-tabs-top-content{
            width: 100%;
            height: calc(100% - 56px);
            .ant-tabs-tabpane{
              width: 100%;
              >div{
                display: flex;
                width: 100%;
                height: 166px;
                >div{
                  flex: 1;
                  >div{
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .bottom-box{
    width: 100%;
    flex: 1;
    margin-top: 20px;
    padding: 15px 24px;
    .ant-row:nth-child(1){
      .ant-col:nth-child(1){
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
    .ant-row:nth-child(2){
      width: 100%;
      height: calc(100% - 38px);
      .ant-tabs-card{
        width: 100%;
        height: 100%;
        ::v-deep .ant-tabs-top-content{
          width: 100%;
          height: calc(100% - 56px);
          .ant-tabs-tabpane{
            width: 100%;
            >div{
              display: flex;
              width: 100%;
              height: 297px;
              >div{
                flex: 1;
                >div{
                  width: 100%;
                  height: 100%;
                  padding: 0px 8px;
                  box-sizing: border-box;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>